
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/29 0029
  Time: 下午 12:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style>
        .time-item strong ,#endtime{
            color: #fff;
            line-height: 49px;
            font-size: 36px;
            font-family: Arial;
            padding: 0 10px;
            /*margin-right: 10px;*/
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        .time-item{
            background: royalblue;
            position: fixed;
            right: 0px;
            float: left;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        #addta{
            width: 500px;
            margin: 0px auto;
            height: 300px;
        }
        #init{
            margin: 0px auto;
            width: 500px;
        }
        th{
            height: 50px;
            font-size: 24px;
        }
        .label{
            border-radius: 10px;
            background: green;
        }
        #endexam{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body id="body">
<div class="time-item">
    <span id="endtime">距考试结束还有：</span><br>
    <strong id="hour_show">00时</strong>
    <strong id="minute_show">00分</strong>
    <strong id="second_show">00秒</strong>
</div>
<table id="addta">
    <tr>
        <th>${exam.eName}</th>
    </tr>
</table>
<table id="init">
    <tr>
        <td align="center">
            <a href="javascript:;" id="prev" class="page">上一题</a>
            <a href="javascript:;" id="next" class="page">下一题</a>
            <input type="button" name="endexam" value="确认交卷" id="endexam" onclick="endExam()"/>
        </td>
    </tr>
    <tr>
        <td>

            <hr style="height: 2px ;background: green">
<%--            <c:forEach begin="1" end="10" step="+1" varStatus="s">--%>
            <c:forEach items="${exam.eString.split(',')}" varStatus="s">
                ${s.index+1}&nbsp;<label><input type="radio" id="choose${s.index+1}"  value="-1"  name="${s.index+1}" class="lab" checked /></label>
            </c:forEach>
        </td>
    </tr>
</table>

<script>
    var countExam="${exam.eString}".split(",").length;//考试试卷的总题数
    var intDiff =${exam.eTime*60}; //倒计时总秒数
    var answer=new Array(countExam);//定义数组，存放学生的答案选项，传递到后台
    var count=0;//统计endExam函数的调用次数，保证他只被调用一次
    var rows;//设置每次分页要增加的表格table中的行
    var currPage;//当前要显示的页
    var pages;//总页数

    $(function(){
        function getExam(curr) {
            $.ajax({
                type:'POST',
                url:"StuExamPageServlet",
                dataType:'JSON',
                data:{
                    eid:${exam.eId},
                    currPage:curr||1,
                },
                success:function (data) {
                    currPage=data.currNum;
                    pages=data.countPage;
                    //先删除之前显示页的数据
                    $("#addta").find("tr[class='examdata']").remove();
                    $.each(data.tkArrayList,function (index,obj) {
                        var test=obj.tContent;
                        if(obj.style.styleId==1){
                            rows="<tr class='examdata' style='font-size: 18px;height: 30px;font-weight:500'><td>选择题</td></tr>";
                        }else{
                            rows="<tr class='examdata' style='font-size: 18px;height: 30px;font-weight:500'><td>判断题</td></tr>";
                        };
                        $("#addta").append(rows);
                        var tests=test.split("#");
                        for(var i=0;i<tests.length;i++){
                            if(i==0){
                                rows="<tr class='examdata'><td>"
                                    +currPage+'&nbsp;'+tests[i]+
                                    "</td></tr>";
                            }else{
                                var check=document.getElementById("choose"+currPage).value;
                                if(check!=-1){
                                    if(tests[i].substring(0,1)==check){
                                        rows="<tr class='examdata'><td><input type='radio' checked name=choose"+currPage+" " +
                                            "value="+tests[i].substring(0,1)+" onclick='chooses(this.name,this.value)' />"
                                            +tests[i]+
                                            "</td></tr>";
                                    }else{
                                        rows="<tr class='examdata'><td><input type='radio' name=choose"+currPage+" " +
                                            "value="+tests[i].substring(0,1)+"  onclick='chooses(this.name,this.value)' />"
                                            +tests[i]+
                                            "</td></tr>";
                                    }
                                }else {
                                    rows="<tr class='examdata'><td><input type='radio' name=choose"+currPage+" " +
                                        "value="+tests[i].substring(0,1)+"  onclick='chooses(this.name,this.value)' />"
                                        +tests[i]+
                                        "</td></tr>";
                                }
                            }
                            $("#addta").append(rows);
                        }
                    });
                }
            });
        };
        //翻页
        $(".page").click(function () {
            var flag = $(this).attr("id");
            if (flag == "prev") {
                currPage=currPage-1;
                if(currPage<1){
                    currPage=1;
                }
                getExam(currPage);
            } else if (flag == "next") {
                currPage=currPage+1;
                if(currPage>pages){
                    currPage=pages;
                }
                getExam(currPage);
            }
        });
        //跳页
        $(".lab").click(function () {
            currPage = $(this).attr("name");
            getExam(currPage);
        });

        getExam();
        timer(intDiff);

    });

    /*
   * 当某题已做时，对应的下方的题号显示为选中状态（已做）
   * */
    function chooses(a,v){
        var choose1=document.getElementsByName(a);//当前正在做的题的选项
        var choose2=document.getElementById(a);//获取当前正在做的题所对应的下方的答案显示栏的元素
        var choose3=document.getElementById(a).parentNode;//label标签
        for(var i=0;i<choose1.length;i++){
            if(choose1[i].checked){
                choose2.checked=true;
                choose2.setAttribute("value",v);//为当前题对应的下方的label设置value，存放所选的答案
                choose3.classList.add('label');//设置背景变化
            }
        }
    };

    function timer(intDiff) {
        window.setInterval(function() {
            if(count==0) {
                var hour = 0,
                    minute = 0,
                    second = 0; //时间默认值
                if (intDiff > 0) {
                    hour = Math.floor(intDiff / (60 * 60));
                    minute = Math.floor(intDiff / 60) - (hour * 60);
                    second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
                }
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $('#hour_show').html('<s id="h"></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                intDiff--;
                if (intDiff == 5) {
                    alert("距考试结束还有5分钟，请注意答题时间！")
                }
                if (intDiff == 0&&count==0) {//计时器为0时，触发交卷
                    alert("考试时间到，请点击交卷！");
                    for(var i=1;i<=countExam;i++){//遍历下方radio中存放的学生所选的选项值，存放在数组中
                        var an=document.getElementById("choose"+i).value;
                        answer[i-1]=an;
                    };
                    console.log(answer);

                    $.ajax({//异步调用，得到学生考试分数
                        url:"StuScoreServlet",
                        type:"POST",
                        traditional:true,//这个属性默认是false,jquery会深度序列化这个对象，以适应java框架，通过设置tradtional为true阻止深度序列化
                        data:{
                            answers:answer
                        },
                        success:function (result) {
                            $("#body").html("<b>你的考试分数是："+result+"分</b>");
                        }
                    });
                }
            }
        }, 1000);
    };

    function endExam() {
        if(intDiff!=0){
            var flag=confirm("确认交卷！");
            if(flag){
                count++;
                for(var i=1;i<=countExam;i++){//遍历下方radio中存放的学生所选的选项值，存放在数组中
                    var an=document.getElementById("choose"+i).value;
                    answer[i-1]=an;
                };
                console.log(answer);

                $.ajax({//异步调用，得到学生考试分数
                    url:"StuScoreServlet",
                    type:"POST",
                    traditional:true,//这个属性默认是false,jquery会深度序列化这个对象，以适应java框架，通过设置tradtional为true阻止深度序列化
                    data:{
                        answers:answer
                    },
                    success:function (result) {
                        $("#body").html("<b>你的考试分数是："+result+"分</b>");
                    }
                });
            }
        }
    };
</script>
</body>
</html>